<template>
  <div>
    <div style="margin: 20px 0">
      <a-button
        type="primary"
        style="background: #66b1ff; color: #fff; border: none"
        @click="closeWaybillCheckInfo"
      >
        返回列表
      </a-button>
      <a-button
        :loading="loadingFile"
        @click="exportExcelRow"
        type="primary"
        style="
          background: #66b1ff;
          color: #fff;
          border: none;
          margin-left: 20px;
        "
      >
        导出结果<a-icon type="download" />
      </a-button>

      <a-button
        :loading="downloadLoding"
        @click="downloadOldWaybillFile"
        type="primary"
        style="
          background: #66b1ff;
          color: #fff;
          border: none;
          margin-left: 20px;
        "
      >
        下载原账单
      </a-button>
    </div>
    <div style="margin-bottom: 20px" id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          客户编号：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          运单号：<a-input :maxLength="128" v-model="searchData.waybillNo" style="width: 60%" />
        </a-col>
        <a-col :span="6">
          成本差：
          <a-input-number v-model="searchData.costVariance" />
          ~ <a-input-number v-model="searchData.costVarianceEnd"
        /></a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getBillTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            结算差：<a-input-number v-model="searchData.payAmount" />
            ~
            <a-input-number v-model="searchData.payAmountEnd" />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getBillTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <!-- //账单核账信息 -->
      <div class="bill-info" v-if="billInfoObj">
        <h3 style="background: #f2f2f2">账单核账信息</h3>
        <table style="width: 100%">
          <tr style="background: #f2f2f2; border-top: 1px solid #cccccc">
            <td style="width: 12%">
              <h3>账单标题</h3>
            </td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.billTitle }}
            </td>
            <td style="width: 12%"><h3>账单编号</h3></td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.billNumber }}
            </td>
            <td style="width: 12%"><h3>物流平台账号</h3></td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.platform }}
            </td>
            <td style="width: 12%"><h3>物流商</h3></td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.channel }}
            </td>
          </tr>
          <tr
            style="
              background: #f2f2f2;
              border-top: 1px solid #cccccc;
              border-bottom: 1px solid #cccccc;
            "
          >
            <td style="width: 12%"><h3>账单日期</h3></td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.billDate.replaceAll("T", " ") }}
            </td>
            <td style="width: 12%"><h3>账单币种</h3></td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.billCurrency }}
            </td>
            <td style="width: 12%"><h3>账单总金额</h3></td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.billAmount }}
            </td>
            <td style="width: 12%">
              <h3>补收总金额</h3>
            </td>
            <td style="width: 12%; background: #fff; text-align: center">
              {{ billInfoObj.payTotalAmount }}
            </td>
          </tr>
        </table>
      </div>
      <!-- //表格数据据 -->
      <a-table
        :columns="columns"
        :data-source="tableList"
        :pagination="false"
        :scroll="{ x: 1500 }"
      >
        <span slot="systemLength" slot-scope="text, record">
          {{ record.systemLength * 1 }}*{{ record.systemWidth * 1 }}*{{
            record.systemHeight * 1
          }}
        </span>
        <span slot="billsPaid" slot-scope="text, record">
          {{ record.billsPaid * 1 }}
        </span>
        <span slot="costPrice" slot-scope="text, record">
          {{ record.costPrice * 1 }}
        </span>
        <span slot="sku" slot-scope="text, record">
          {{ record.sku || "暂无" }}
        </span>
        <span slot="systemSettlement" slot-scope="text, record">
          {{ record.systemSettlement * 1 }}
        </span>
        <span slot="receivablePrice" slot-scope="text, record">
          {{ record.receivablePrice * 1 }}
        </span>
        <span slot="systemWeight" slot-scope="text, record">
          {{ record.systemWeight * 1 }}
        </span>
        <span slot="rememberWeight" slot-scope="text, record">
          {{ record.rememberWeight * 1 }}
        </span>
        <span slot="costVariance" slot-scope="text, record">
          {{ record.costVariance * 1 }}
        </span>
        <span slot="payAmount" slot-scope="text, record">
          {{ record.payAmount * 1 }}
        </span>
        <span slot="billsPaid" slot-scope="text, record">
          <span
            style="
              text-decoration: underline;
              color: rgb(41, 41, 224);
              cursor: pointer;
            "
            @click="billingDetails(record)"
          >
            {{ record.billsPaid * 1 }}
          </span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="subsequent(record)"
            >补收
          </a>
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- //账单明细 -->
    <a-modal width="40%" v-model="billingDetailsVisible" title="账单明细">
      <template slot="footer">
        <a-button @click="billingDetailsVisible = false">关闭</a-button>
      </template>
      <a-table
        size="small"
        :columns="billingDetailsColumns"
        :data-source="billingDetailsData"
        :pagination="false"
      >
      </a-table>
    </a-modal>
    <!-- 补收模态框-->
    <a-modal v-model="subsequentVisible" title="补收">
      <template slot="footer">
        <a-button @click="subsequentVisible = false">关闭</a-button>
        <a-button type="primary" :loading="loading" @click="savaSubsequent">
          确认
        </a-button>
      </template>
      <a-form-model
        ref="ruleForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="subsequentData"
      >
        <a-form-model-item label="补收金额" prop="payAmount">
          <a-input-number
            :precision="4"
            v-model="subsequentData.payAmount"
            style="width: 100%"
            :min="0"
          />
        </a-form-model-item>
        <a-form-model-item label="补收备注" prop="payRemark">
          <a-textarea
            :maxLength="15"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            v-model="subsequentData.payRemark"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import req from "@/utils/req";
import { mapState } from "vuex";
import {
  WaybillCheck_pageWaybillNuclearMaster,
  WaybillCheck_pageWaybillNuclearInfo,
  WaybillCheck_updatePayAmountAndRemark,
  WaybillCheck_exportExcel,
  WaybillCheck_downloadOldWaybillFile,
  WaybillCheck_selectMasterData,
} from "@/apis/system/FinanceManagement/FinanceManagement";
export default {
  props: ["billInfo"],
  data() {
    return {
      downloadLoding: false,
      loadingFile: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      //补收模态框
      subsequentVisible: false,
      loading: false,
      expand: false,
      billInfoObj: null,
      searchData: {
        billNumber: null,
        current: 1,
        size: 10,
        tenantId: null,
        waybillNo: null,
        costVariance: null,
        costVarianceEnd: null,
        payAmount: null,
        payAmountEnd: null,
        billCurrency: null,
      },
      tableList: [],
      total: 1,
      spinning: false,
      billingDetailsVisible: false,
      //明细数据
      billingDetailsData: [],
      //补收数据
      subsequentData: {
        id: null,
        payAmount: null,
        payRemark: null,
      },
      fileName: null,
    };
  },
  mounted() {
    this.searchData.billNumber = this.billInfo.billNumber;
    this.searchData.billCurrency = this.billInfo.billCurrency;
    if ((this.searchData.billNumber ?? "") != "") {
      this.getBillTableList();
      this.getBillTopInfo();
    }
  },
  methods: {
    //下载原账单
    async downloadOldWaybillFile() {
      this.downloadLoding = true;
      let res = await WaybillCheck_downloadOldWaybillFile(
        this.searchData.billNumber
      );
      req.exportCsv(this.fileName, res);
      this.downloadLoding = false;
    },
    //导出账单详情列表
    async exportExcelRow() {
      this.loadingFile = true;
      let res = await WaybillCheck_exportExcel(this.searchData.billNumber);
      req.exportFile("已核帐账单", res);
      setTimeout(() => {
        this.loadingFile = false;
      }, 1000);
    },
    //确认补收
    async savaSubsequent() {
      this.loading = true;
      if ((this.subsequentData.payRemark ?? "") == "") {
        this.subsequentData.payRemark = "暂无";
      }
      let { code } = await WaybillCheck_updatePayAmountAndRemark(
        this.subsequentData.id,
        this.subsequentData.payAmount,
        this.subsequentData.payRemark
      );
      if (code == "10000") {
        this.subsequentVisible = false;
        this.getBillTableList();
        this.getBillTopInfo();
        this.loading = false;
      }
    },
    //补收模态框
    subsequent(record) {
      this.subsequentData = {
        payAmount: null,
      };
      this.subsequentData.payAmount = record.payAmount;
      this.subsequentData.payRemark = record.payRemark || "";
      this.subsequentData.id = record.id;
      this.subsequentVisible = true;
    },
    //账单明细
    async billingDetails(record) {
      let { code, responseBody } = await WaybillCheck_pageWaybillNuclearInfo(
        record.waybillNo
      );
      if (code == "200") {
        this.billingDetailsData = responseBody;
        this.billingDetailsVisible = true;
      }
    },
    //重置按钮
    resetSearch() {
      this.searchData.tenantId = null;
      this.searchData.waybillNo = null;
      this.searchData.costVariance = null;
      this.searchData.costVarianceEnd = null;
      this.searchData.payAmount = null;
      this.searchData.payAmountEnd = null;
      this.getBillTableList();
    },
    //关闭模态框
    closeWaybillCheckInfo() {
      this.$emit("closeWaybillCheckInfo");
    },
    // 获取表格数据
    async getBillTableList() {
      if (
        this.searchData.costVariance > this.searchData.costVarianceEnd ||
        this.searchData.payAmount > this.searchData.payAmountEnd
      ) {
        this.$message.error("差值查询,起始值必须小于结束值！");
        return false;
      }
      this.spinning = true;
      let { code, responseBody } = await WaybillCheck_pageWaybillNuclearMaster(
        this.searchData
      );
      if (code === "200") {
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    async getBillTopInfo() {
      let { code, responseBody } = await WaybillCheck_selectMasterData(
        this.searchData.billNumber,
        this.searchData.billCurrency
      );
      if (code == "200") {
        this.billInfoObj = responseBody;
        this.fileName = responseBody.filePath
          .split("/") [responseBody.filePath.split("/").length - 1].split(".")[0];
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getBillTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getBillTableList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  computed: {
    ...mapState(["warehouse", "accArray"]),
    columns() {
      return [
        {
          title: "类型",
          dataIndex: "serverName",
          align: "center",
          scopedSlots: { customRender: "serverName" },
          width: "10%",
          //  fixed: "left",
        },
        {
          title: "运单号",
          dataIndex: "waybillNo",
          align: "center",
          scopedSlots: { customRender: "waybillNo" },
          width: "16%",
        },
        {
          title: "SKU",
          dataIndex: "sku",
          scopedSlots: { customRender: "sku" },
          align: "center",
          width: "10%",
        },
        {
          title: "账单实收",
          dataIndex: "billsPaid",
          scopedSlots: { customRender: "billsPaid" },
          align: "center",
          width: "10%",

          // ellipsis: true,
        },
        {
          title: "报价成本",
          dataIndex: "costPrice",
          scopedSlots: { customRender: "costPrice" },
          align: "center",
          width: "10%",
        },
        {
          title: "系统结算",
          dataIndex: "systemSettlement",
          scopedSlots: { customRender: "systemSettlement" },
          align: "center",
          width: "10%",
        },

        {
          title: "应收金额",
          dataIndex: "receivablePrice",
          scopedSlots: { customRender: "receivablePrice" },
          align: "center",
          width: "10%",
        },
        {
          title: "实重(系统)",
          dataIndex: "systemWeight",
          scopedSlots: { customRender: "systemWeight" },
          align: "center",
          width: "12%",
        },
        {
          title: "计重(系统)",
          dataIndex: "rememberWeight",
          scopedSlots: { customRender: "rememberWeight" },
          align: "center",
          width: "12%",
        },
        {
          title: "长*宽*高(系统)",
          dataIndex: "systemLength",
          scopedSlots: { customRender: "systemLength" },
          align: "center",
          width: "14%",
        },

        {
          title: "成本差 ",
          dataIndex: "costVariance",
          scopedSlots: { customRender: "costVariance" },
          align: "center",
          width: "10%",
        },
        {
          title: "补收金额 ",
          dataIndex: "payAmount",
          scopedSlots: { customRender: "payAmount" },
          align: "center",
          width: "10%",
        },
        {
          title: "客户编号 ",
          dataIndex: "tenantId",
          scopedSlots: { customRender: "tenantId" },
          align: "center",
          width: "10%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          fixed: "right",
          width: 80,
        },
      ];
    },
    billingDetailsColumns() {
      return [
        {
          title: "运单号",
          dataIndex: "waybillNo",
          align: "center",
          scopedSlots: { customRender: "waybillNo" },
          width: "10%",
          //  fixed: "left",
        },
        {
          title: "费用项",
          dataIndex: "serverType",
          align: "center",
          scopedSlots: { customRender: "serverType" },
          width: "15%",
        },
        {
          title: "账单费用",
          dataIndex: "price",
          scopedSlots: { customRender: "price" },
          align: "center",
          width: "10%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.bill-info {
  // margin-top: 20px;
  h3 {
    margin: 0;
    padding-left: 20px;
  }
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>